<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		.father{
			width: 100%;
			height: inherit;
			overflow: hidden;
			/* background-color: black; */
		}
		.inpu{
			width: 95%;
			height: 50px;
			margin: 10px;
			border: 2px solid #00BFFF;
			padding-left: 15px;
			outline: none;
			font-size: 20px;
			color: #00BFFF;
		}
		.inpu::placeholder{
			color: #00BFFF;
			font-size: 20px;
		}
		.father .ul li img,.father .ul_done li img{
			width: 50px; 
			height: 50px; 
			background-color:#00BFFF; 
			vertical-align: middle;
		}
		
		.father .ul li,.father .ul_done li{
			display: inline-block;
			width: 95%;
			height: 50px;
			margin-left:10px;
			margin-bottom: 10px;
			font-size: 20px;
			box-shadow:2px 3px 8px rgba(128,128,128,0.5) ;
		}
		.father .ul_done li{
			margin-top: 10px;
		}
		.father .ul li span,.father .ul_done li span{
			margin-left: 10px;
		}
		.father .ul_done li span{
			text-decoration: line-through;
		}
		.father p{
			display: none;
			text-align: center;
			background-image:-webkit-linear-gradient(bottom,black,white); 
			-webkit-background-clip:text; 
			-webkit-text-fill-color:transparent;           
		}
		.icon{
			width: 120px;
			height: 60px;
			margin: 0 auto;
			margin-top:610px ;
			}
		.icon_del{
			display: inline-block;
			width: 50px;
			height: 50px;				
			background:url(./a_2.png) no-repeat;
			background-size: 100%;		
		}
		.icon_sound{
			display: inline-block;
			width: 38px;
			height: 45px;						
			background:url(./a_6.png) no-repeat;
			background-size: 100%;
		}
	</style>
	<body>
		<div class="father">
			<input class="inpu" type="text" placeholder="add new to-do...">
			<ul class="ul"></ul>
			<p id="done">~Done~</p>
			<ul class="ul_done"></ul>
			<div class="icon">
				<div class="icon_del"></div>
				<div class="icon_sound"></div>
			</div>			
		</div>			
		<script>
			var inpu = document.querySelector(".inpu");
			var ul = document.querySelector(".ul");						
			var ul_done = document.querySelector(".ul_done");
			var del = document.querySelector(".icon_del")
			// console.log(del)
			// var array = [
			// 	"./checkbox.dark.big.png",
			// 	"./checkbox.light.big.png"
			// 	];
			inpu.onkeyup = function(e){
				var txt = inpu.value;
				if(e.keyCode === 13){
					if(txt ===""){
						alert("你倒是输入点东西啊")
					}else{
						var li = document.createElement("li");						
						li.innerHTML = `
									   <img class="pic" src="./checkbox.dark.big.png">
									   <span>${this.value}</span>
									   `;
						ul.appendChild(li);
						inpu.value = "";
						
					}
					// var image = document.querySelector(".ul .pic");
					// console.log(image)
					// for(var i=1; i<5; i++){					
					// 	 image[i].src = array[i];
						
					// }
				}
				
			}
			ul.onclick = function(e){
				if(e.target.classList.contains('pic')){
					e.target.src = "./checkbox.light.big.png";
					e.target.parentNode.remove();
					done.style.display = "block";
					ul_done.appendChild(e.target.parentNode);
					// var li = document.getElementsByName("ul li");
					// console.log(li)
					// var image = document.querySelector(".ul .pic");
					// for(var i=1; i<li.length; i++){
					// 	 image[i].src = array[i];
						
					// }
				}
			}
			ul_done.onclick = function(e){
				if(e.target.classList.contains('pic')){
					e.target.src = "./checkbox.dark.big.png";
					e.target.parentNode.remove();
					done.style.display = "block";
					ul.appendChild(e.target.parentNode);
					if(ul_done.children.length === 0){
						done.style.display = "none";
					}
				}
			}
			del.onclick = function(){
				var ul_done = document.querySelector(".ul_done");
				// console.log(ul_done.children[0])
				if(ul_done.children.length === 0){
					alert("没有要删除的已办事项")
				}else{
					 var li = document.querySelectorAll(".ul_done>li");
					 // console.log(li)
					// var ul_done = document.querySelector(".ul_done");
					var sc = confirm(`确定删除所有已办事项吗？共${li.length}条数据`);
					// console.log(confirm)
					if(sc == true){
							for(var i=0; i<li.length; i++){
							ul_done.removeChild(li[i]);
							done.style.display = "none";
						}
						
					}
														
				}
			}
				
			
			
		</script>
	</body>
</html>
